<template>
	<view class="search">
		<u-navbar  title="">
			<view class="slot-wrap">
				<view class="input">
					<!-- <text class="iconfont">&#xe670;</text> -->
					<image class="search_img" src="/static/home/search.png"></image>
					<u-input v-model.trim ="value" placeholder="请输入搜索信息" @confirm="searchList" type="text" confirm-type="搜索" :border="false" />
				</view>
				<!-- <view class="sousuo" @click="searchList">搜索</view> -->
			</view>
		</u-navbar>
		
		<view class="history">
			<view class="top">
				<view class="top1">历史搜索</view>
				<view class="top2" @click="empty">
					<text class="iconfont">&#xe63c;</text>
					<!-- <text>清空</text> -->
				</view>
			</view>
			<view class="bottom">
				<view class="item" v-for="(v, k) in history" :key="k" @click="getSearch(v)">{{v}}</view>
				<!-- <view class="item">念佛</view>
				<view class="item">念佛</view> -->
			</view>
		</view>
		<view class="hot_search">
			<!-- <view class="top">
				<view class="top1">热门搜索</view>
				<view class="top2">
				</view>
			</view> -->
			<!-- <view class="bottom">
				<view class="item" v-for="(v, k) in hotSearchList" :key="k" @click="getSearch(v.name)">{{v.name}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				history: [],
				hotSearchList: []
			}
		},
		onLoad() {
			// uni.showLoading({
			// 	title: '加载中'
			// })
		},
		onShow() {
			// console.log(uni.getStorageSync('history'))
			this.value = ''
			this.history = uni.getStorageSync('history') ? JSON.parse(uni.getStorageSync('history')) : []
		},
		methods: {
			searchList() {
				if (this.value == '') {
					this.$message.info('请输入搜索内容')
					return false
				}
				if(this.history.indexOf(this.value) == -1) {
					if (this.history.length < 5) {
						this.history.unshift(this.value)
					} else {
						this.history.pop();
						this.history.unshift(this.value)
					}
					
				} else {
					let index = this.history.indexOf(this.value)
					this.history.splice(index, 1)
					this.history.unshift(this.value)
				}
				uni.setStorageSync('history', JSON.stringify(this.history))
				uni.navigateTo({
					url: '/pages/home/search/searchList?value=' + this.value
				})
			},
			// 清空
			empty() {
				this.history = []
				uni.removeStorageSync('history')
				this.$message.info('删除成功')
			},
			// 点击搜索
			getSearch(value) {
				this.value = value
				this.searchList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	background: #FFFFFF;
	// 	height: 100%;
	// 	color: #333333;
	// }
	.search {
		padding: 24upx 32upx;
		.slot-wrap {
			height: 66upx;
			display: flex;
			margin-bottom: 56upx;
			padding: 28rpx 32upx 0 16rpx;
			// background: green;
			width: 100%;
			
			.input {
				position: relative;
				flex: 8.5;
				/deep/.u-input {
					background: #F6F7F9;
					border-radius: 8upx;
					
				}
				/deep/.u-input__input {
					padding-left: 60upx;
				}
				/deep/.u-input__right-icon {
					height: 66upx;
					line-height: 70upx;
					padding-right: 16rpx;
				}
				.iconfont {
					
				}
				.search_img {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					top: 90%;
					left: 16upx;
					z-index: 100;
					transform: translateY(-50%);
					// color: #C2C3C7;
				}
			}
			.sousuo {
				flex: 1.5;
				margin-left: 28upx;
				padding-top: 10upx;
			}
		}
		.history {
			margin-bottom: 80upx;
			margin-top: 40rpx;
			.top {
				display: flex;
				margin-bottom: 32upx;
				.top1 {
					flex: 5;
					font-size: 32rpx;
				}
				.top2 {
					text-align: right;
					flex: 5;
					.iconfont {
						color: #999999;
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
			.bottom {
				.item {
					display: inline-block;
					padding: 8upx 52upx;
					font-size: 28upx;
					border: 1rpx solid #bfbfbf;
					opacity: 1;
					border-radius: 32upx;
					margin-right: 20upx;
					margin-bottom: 32upx;
				}
			}
		}
		.hot_search {
			margin-bottom: 80upx;
			.top {
				display: flex;
				margin-bottom: 32upx;
				.top1 {
					flex: 5;
				}
				.top2 {
					text-align: right;
					flex: 5;
				}
			}
			.bottom {
				.item {
					display: inline-block;
					padding: 8upx 50upx;
					font-size: 28upx;
					background: #F6F6F6;
					opacity: 1;
					border-radius: 100upx;
					margin-right: 24upx;
					margin-bottom: 32upx;
				}
			}
		}
	}
</style>
